<template>
  <div>
    <!-- <div class="toptitle">角色权限分配</div> -->

    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-button type="primary" @click="onSubmit()">分配权限</el-button>
      </el-form-item>
      <el-form-item label="应用选择：" style="margin-left:410px">
        <el-select v-model="formInline.region" @change="getVendorId(formInline.region)">
          <el-option v-for="(send,i)  in data3" :key="i" :value="send.appId" :label="send.appName"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="limt">
      <div class="limttable">
        <el-table
          :data="tableData"
          border
          width="100%"
          style="font-size: 10px"
          :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        >
          <el-table-column label="选择" width="80" align="center">
            <template slot-scope="scope">
              <el-radio
                class="radio"
                v-model="radio"
                :label="scope.$index"
                @change="selectradio(scope.row)"
              >&nbsp;</el-radio>
            </template>
          </el-table-column>

          <el-table-column type="index" width="80" label="序号"></el-table-column>
          <el-table-column prop="roleName" label="角色名称"></el-table-column>
        </el-table>
        <div class="block" style="margin-top:10px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30, 50, 100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="8"
          ></el-pagination>
        </div>
      </div>
      <div class="limttree">
        <div class="limttreecontain">
          <el-tree
            :data="data4"
            :props="defaultProps"
            show-checkbox
            node-key="id"
            :expand-on-click-node="false"
          ></el-tree>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  rolemanage,
  rolemanagetwo,
  getshu,
  setlimit
} from "@/api/platformmanage";
import qs from "qs";
let id = 1000;
export default {
  data() {
    return {
      formInline: {
        region: ""
      },
      data5: [],
      data3: [],
      data4: [],
      defaultProps: {
        children: "sub",
        label: "name"
      },
      objone: {},
      tableData: [],
      multipleSelection: [],
      radio: "",
      rolefenid: "",
      selected: {}
    };
  },
  mounted() {
    this.getrolemanage();
  },
  methods: {
    selectradio(v) {
      console.log(v, "ll");
      var zTreeAsyncTest = "zTreeAsyncTest";
      this.rolefenid = v.roleId;
      let data = {
        roleId: v.roleId,
        appId: this.formInline.region,
        otherParam: zTreeAsyncTest
      };
      getshu(data).then(res => {
        this.records = res.records;
        var arr = res.records;
        var father = [],
          children = [],
          sanmenu = [];
        arr.forEach(item => {
          if (item.resourceLevel == 1) {
            item.sub = [];
            father.push(item);
          } else if (item.resourceLevel == 2) {
            children.push(item);
          }
        });
        for (var i = 0; i < father.length; i++) {
          for (var j = 0; j < children.length; j++) {
            if (father[i].id == children[j].pid) {
              if (!father[i].sub.length) {
                father[i].sub.push(children[j]);
                sanmenu.push(father[i]);
              } else {
                father[i].sub.push(children[j]);
              }
            }
          }
        }
        this.data4 = sanmenu;
        console.log(this.sanmenu, "pppppq");
        sanmenu.map((item, i) => {
          this.data5.push(item.uuid);
          console.log(this.data5, "pppp");
          //   for (var i = 0; i < this.data5.length; i++) {
          //     this.objone[i] = this.data5[i];
          //     console.log(this.objone, "ppppppppp");
          //   }
        });
      });
    },
    onSubmit() {
      console.log(this.rolefenid, "pfl");
      //   this.data5 = [];
      //   this.data5.push(this.rolefenid);
      let data = {
        roleId: this.rolefenid,
        appId: this.formInline.region,
        menuIds: this.data5
      };
      setlimit(data).then(res => {
        this.$message({
          showClose: true,
          message: "新增角色菜单关联关系成功",
          type: "success"
        });
      });
    },

    getVendorId(v) {
      this.formInline.region = v;
      console.log(v, "lll");
      this._getshu();
    },
    _getshu() {
      var zTreeAsyncTest = "zTreeAsyncTest";
      let data = {
        roleId: "",
        appId: this.formInline.region,
        otherParam: zTreeAsyncTest
      };
      getshu(data).then(res => {
        this.records = res.records;
        // var arr = res.records;
        // var father = [],
        //   children = [],
        //   sanmenu = [];
        // arr.forEach(item => {
        //   if (item.resourceLevel == 1) {
        //     item.sub = [];
        //     father.push(item);
        //   } else if (item.resourceLevel == 2) {
        //     children.push(item);
        //   }
        // });
        // for (var i = 0; i < father.length; i++) {
        //   for (var j = 0; j < children.length; j++) {
        //     if (father[i].id == children[j].pid) {
        //       if (!father[i].sub.length) {
        //         father[i].sub.push(children[j]);
        //         sanmenu.push(father[i]);
        //       } else {
        //         father[i].sub.push(children[j]);
        //       }
        //     }
        //   }
        // }
        // this.data4 = sanmenu;
        // console.log(this.sanmenu, "pppppq");
        // sanmenu.map((item, i) => {
        //   console.log(item, "jjj");
        // });
      });
    },

    getrolemanage() {
      rolemanage().then(res => {
        this.tableData = res.records;
      });
    },
    // remove(node, data) {
    //   const parent = node.parent;
    //   const children = parent.data.children || parent.data;
    //   const index = children.findIndex(d => d.id === data.id);
    //   children.splice(index, 1);
    // },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    renderContent(h, { node, data, store }) {
      return (
        `<span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
          <span>
            <span>{node.label}</span>
          </span>
        </span>`
      );
    },

    showRow(row) {
      //赋值给radio
      this.radio = this.tableData.indexOf(row);
      this.selected = row;
    }
  }
};
</script>
<style lang="less" scoped>
.limttable {
  width: 500px;
  float: left;
}

.limttree {
  display: inline-block;

  border-top: 48px solid rgb(238, 241, 246);
  width: 520px;
  margin-left: 20px;
}
.toptitle {
  border: 1px solid #e0e0e0;
  border-bottom: 2px solid #188097;
  background: #f5f5f5;
  line-height: 35px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}
.limttreecontain {
  height: 380px;
  width: 200px;
  overflow: scroll;
  border: 1px solid #ccc;
}
</style>